<template>
  <div class="chart-box">
    <!-- <el-button type="text" class="change-type" @click="changeType">{{ `${type != 'line' ? '折线图查看' : '柱状图查看'}` }}</el-button> -->
    <div class="chart" ref="chartBox"></div>
  </div>
</template>
<script>
// import { formatTime } from "@/utils/tool";
export default {
  data() {
    return {
      chartData: [],
      chartObj: null,
      type: 'bar',
      timer: null
    };
  },
  props: ['option_cfg', 'metricData'],
  methods: {
    resize: function () {
      this.chartObj.resize();
    },
    setOption() {
      let xAxis = this.chartData.data.xTicks
      let yAxis = this.chartData.data.y
      let series = []
      let color = this.chartData.styles.map(e => e.color)
      let min = 0
      let temp = []
      yAxis.forEach(e => {
        e.forEach(item => {
          temp.push(item)
        })
      })
      temp.sort().reverse()
      min = temp[0]
      yAxis.forEach(e => {
        series.push({
          data: e,
          type: 'bar'
        })
      })
      console.log("series22222222222222222", series)

      let text = this.option_cfg.key
      let option = {
        title: {
          text, textStyle: {
            fontSize: '18px',
            fontWeight: 600,
            color: this.$AxisColor
          }
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLine: {//x轴线的颜色以及宽度
            lineStyle: {
              color: this.$AxisColor,
              type: "solid"
            }
          },
        },
        yAxis: {
          type: 'value',
          max: "0",
          min,
          axisLine: {//x轴线的颜色以及宽度
            lineStyle: {
              color: this.$AxisColor,
              type: "solid"
            }
          },
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        color: color,
        series
      };
      console.log("series111", series)
      this.chartObj.clear();
      this.chartObj.setOption(option);
      console.log("baroption",option)
    },
    async refeshData(){
      let ret= await this.metricData(this.option_cfg.id, this.option_cfg.key,this.option_cfg.type )
      console.log("chartData",ret)
      this.chartData = JSON.parse(ret.data[0].value)
      let xAxis = this.chartData.data.xTicks
      let yAxis = this.chartData.data.y
      console.log("chartData",this.chartData)
      let series = []
      let min = 0
      let temp = []
      yAxis.forEach(e => {
        e.forEach(item => {
          temp.push(item)
        })
      })
      temp.sort().reverse()
      min = temp[0]
      yAxis.forEach(e => {
        series.push({
          data: e,
          type: 'bar'
        })
      })
      console.log("series2222", series)
      let color = this.chartData.styles.map(e => e.color)
      let option = this.chartObj.getOption()
      console.log("option2222", option)
      console.log("xAxis", xAxis)
      console.log("series", series)
      option.series= series
      option.xAxis[0].data= xAxis
      option.yAxis[0].min = min
      option.color[0]=color
      console.log("option333333333", option)
      //this.chartObj.clear()
      this.chartObj.hideLoading()
      this.chartObj.setOption(option)
    }
  },
  mounted() {
    this.chartData = JSON.parse(this.option_cfg.value)
    this.chartObj = this.$echarts.init(this.$refs.chartBox);
    console.log("before chartBox",this.chartObj)
    this.setOption();
    // this.timer= setInterval(() => {
    //   console.log("刷新" + new Date());
    //   this.refeshData()
    // }, 5000);
    // window.addEventListener("resize", () => {
    //   this.resize();
    // });
  },
  beforeDestroy() {
    // this.chartObj.dispose();
    // this.chartObj.clear();
    //清除定时器
    clearInterval(this.timer);
    this.timer = null;
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped lang="less">
.chart-box {
  height: 100%;
  width: 100%;
  padding: 10px 0 0 20px;
  box-sizing: border-box;
  position: relative;
  .change-type {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 6;
  }
  .chart{
    height: 100%;
    width: 100%;
  }
}
</style>